<html>
<head>
	<title></title>
</head>
<body>
	<form id='frmLogin'>
		<label for='username'>Username:</label>
		<input type='text' id='username' name='username'><br>
		<label for='password'>Password:</label>
		<input type='text' id='password' name='password'><br><br>
		<input type='submit' value='Sign In' id='submit'>
	</form>
	<script type="text/javascript" src='js/prototype.js'></script>
	<script type="text/javascript">
		$('submit').observe('click', login);
		
		function login(e){
			Event.stop(e);

			var url = 'ajax/login.php';

			new Ajax.Request(url, {
				method: 'post',
				parameters: {
					username: document.getElementById('username').value,
					password: document.getElementById('password').value
				},
				onSuccess: process,
				onFailure: function(){
					alert('There was an error with the connection');
				}
			});
		}

		function process(transport){
			var res = transport.responseText;

			if (res == 'proceed') {
				$('frmLogin').hide();

				var result = document.createElement('div');
				result.appendChild(document.createTextNode("You are logged in!"));

				document.body.appendChild(result);
			}else{
				alert("Sorry, your username and password don't match");
			}

		}
	</script>
</body>
</html>